<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NextGen</title>

  <link href="static/css/css2.css" rel="stylesheet">

  <!-- ==========favicon ============-->
  <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
  <!-- =========bootstrap ============-->
  <link rel="stylesheet" href="static/css/bootstrap.min.css">
  <!-- =========fontawesome ============-->
  <link rel="stylesheet" href="static/css/all.min.css">
  <!-- =========animate ============-->
  <link rel="stylesheet" href="static/css/animate.min.css">
  <!-- =========venobox ============-->
  <link rel="stylesheet" href="static/css/venobox.min.css">
  <!-- =========css================== -->
  <link rel="stylesheet" href="static/css/style.css">
  <!-- =========responsive======== -->
  <link rel="stylesheet" href="static/css/responsive.css">
</head>

<body>

  <!-- ================ start nav bar=========== -->
  <nav class="navbar navbar-expand-md main-menu">
    <div class="container">
      <a class="navbar-brand" href="index.html"><img src="static/picture/logo-10.png" alt=""></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Gallery</a>
          </li>
         
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="404.html">404</a>
          </li>
          <li class="nav-item">
            <button class="nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!-- Search Modal -->
  <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="searchModalLabel">Search</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="#" method="GET">
            <div class="mb-3">
              <input type="text" class="form-control" name="query" placeholder="Type to search...">
            </div>
            <button type="submit" class="shadow__btn w-100 mt-3 mb-2">Search</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- ================end nav bar=========== -->

  <!-- start banner-section -->

  <section id="banner" class="cmn-banner" style="background: url(static/image/banner.png) no-repeat center/cover;">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="wow animate__animated animate__fadeInLeft banner-text">
            <h1>Our Services</h1>
            <a href="index.html">Home |</a> <a class="active" href="about.html"> Services</a><a href="#"></a>
          </div>
        </div>
        <div class="col-md-6"></div>
      </div>
    </div>

  </section>
  <!-- start banner-section -->

  <!-- ==========start gallary section ===========================================-->
  <section id="gallery">
    <div class="container">
      <div class="row ">
        <div class="wow animate__animated animate__fadeInLeft col-md-4">
          <div class="gallery-img">
            <img src="static/picture/banner-2.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>VR Headset</h4>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInUp col-md-4">
          <div class="gallery-img">
            <img src="static/picture/banner-1.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>Play VR Headset</h4>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInRight col-md-4">
          <div class="gallery-img">
            <img src="static/picture/banner-3.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>Clear VR Headset</h4>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInLeft col-md-4 mt-4">
          <div class="gallery-img">
            <img src="static/picture/banner-2.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>Game VR</h4>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInUp col-md-4 mt-4">
          <div class="gallery-img">
            <img src="static/picture/banner-1.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>Commercial VR</h4>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInRight col-md-4 mt-4">
          <div class="gallery-img">
            <img src="static/picture/banner-3.jpg" class="w-100" alt="">
          </div>
          <div class="gallery-text text-center mt-3">
            <h4>Product VR</h4>
          </div>
        </div>

      </div>
    </div>
  </section>
  <!-- ==========end gallary section ===========================================-->



  <!-- pricing start -->
  <section id="pricing">
    <div class="container">
      <div class="row">
        <div class="col-md-7 m-auto">
          <div class="wow animate__animated animate__fadeInUp common_head mb-5">
            <h4 class="text-center text-light">PRICING PLAN</h4>
            <p class="text-center text-light">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi deserunt
              facere quod illo odit iusto ipsum ex exercitationem explicabo adipisci, voluptatibus aliquam officiis
              nostrum nemo reiciendis! Sit culpa at nisi?</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="pricing-table">
            <div class="row">
              <div class="col-sm-4">
                <div class="wow animate__animated animate__fadeInLeft card text-center">
                  <div class="title">
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
                    <h2>Basic</h2>
                  </div>
                  <div class="price">
                    <h4><sup>$</sup>25</h4>
                  </div>
                  <div class="option">
                    <ul>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Enforcement</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Management</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Copyright</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Patent Prosecution</li>
                    </ul>
                  </div>
                  <a href="contact.html">Order Now</a>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="wow animate__animated animate__fadeInUp card text-center">
                  <div class="title">
                    <i class="fa fa-plane" aria-hidden="true"></i>
                    <h2>Standard</h2>
                  </div>
                  <div class="price">
                    <h4><sup>$</sup>50</h4>
                  </div>
                  <div class="option">
                    <ul>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Enforcement</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Management</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Copyright</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Patent Prosecution</li>
                    </ul>
                  </div>
                  <a href="contact.html">Order Now</a>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="wow animate__animated animate__fadeInRight card text-center">
                  <div class="title">
                    <i class="fa fa-rocket" aria-hidden="true"></i>
                    <h2>Premium</h2>
                  </div>
                  <div class="price">
                    <h4><sup>$</sup>100</h4>
                  </div>
                  <div class="option">
                    <ul>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Enforcement</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Brand Management</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Copyright</li>
                      <li><i class="fa fa-check" aria-hidden="true"></i> Patent Prosecution</li>
                    </ul>
                  </div>
                  <a href="contact.html">Order Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- pricing end -->
  <!-- testimonial start -->
  <section id="testimonials" class="testimonials">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <div class="wow animate__animated animate__fadeInLeft common-heading mb-5">
            <h4 class="pre-title">What Our Clients Say <span>About Us</span></h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sed, laudantium ullam, soluta quisquam
              aliquid, deserunt illo aliquam libero aspernatur placeat beatae quae? Culpa molestias consequuntur nemo
              ullam minus quasi!</p>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInRight col-md-7">
          <div class="slider-indicator" data-wow-delay=".2s">
            <img src="static/picture/testimonial-01.png" class="active" alt="img" data-id="0">
            <img src="static/picture/testimonial-03.png" alt="img" data-id="1">
            <img src="static/picture/testimonial-02.png" alt="img" data-id="2">
          </div>

          <div class="slider">
            <div class="slide active">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Elisa</h3>
                <span>Founder at Zach</span>
              </div>
            </div>
            <div class="slide">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Natasha</h3>
                <span>Founder at Welling</span>
              </div>
            </div>
            <div class="slide">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Jack</h3>
                <span>Founder at Zim</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- testimonial end -->

  <!-- footer start -->
  <footer class="footer-section">
    <div class="container">
      <div class="wow animate__animated animate__fadeInUp footer-content pt-5 pb-5" data-wow-delay=".2s">
        <div class="row">
          <div class="col-lg-4 col-xl-4 col-lg-4 mb-50">
            <div class="footer-widget">
              <div class="footer-logo">
                <a class="navbar-brand" href="#"><img src="static/picture/logo-10.png" alt=""></a>
              </div>
              <div class="footer-text">
                <p>Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do eiusmod tempor incididuntut consec
                  tetur adipisicing
                  elit,Lorem ipsum dolor sit amet.</p>
              </div>
              <div class="social-icon d-flex">
                <!-- <span>Follow us</span> -->
                <a href="#"><i class="fab fa-facebook-f facebook-bg"></i></a>
                <!-- github -->
                <a href="#"><i class="fab fa-github github-bg"></i></a>
                <!-- linkedin -->
                <a href="#"><i class="fab fa-linkedin-in linkedin-bg"></i></a>
                <!-- youtube -->
                <a href="#"><i class="fab fa-youtube youtube-bg"></i></a>

              </div>
            </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-lg-4 col-md-6 mb-30">
            <div class="footer-widget">
              <div class="footer-widget-heading">
                <h3>Useful Links</h3>
              </div>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Expert Team</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Latest News</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-lg-4 col-md-6 mb-50">
            <div class="footer-widget">
              <div class="footer-widget-heading">
                <h3>Subscribe</h3>
              </div>
              <div class="footer-text mb-25">
                <p>Don’t miss to subscribe to our new feeds, kindly fill the form below.</p>
              </div>
              <div class="subscribe-form">
                <form action="#">
                  <input type="text" placeholder="Email Address">
                  <button><i class="fab fa-telegram-plane"></i></button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright-area">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-lg-6 text-center text-lg-left">
            <div class="copyright-text">
              <p>Copyright &copy; 2024.Company name All rights reserved.<a target="_blank" href="https://www.toymoban.com/htmlmoban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
          </div>
          <div class="col-lg-6 col-lg-6 d-none d-lg-block text-right">
            <div class="footer-menu">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Policy</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- footer section end -->

  <!-- btn_top_bottom part start -->
  <div class="btn_top_bottom">
    <i class="fa-solid fa-arrow-up-long">
    </i>
  </div>
  <!-- btn_top_bottom part end -->


  <!-- footer end -->


  <!-- =====================js-bootstrap==================================== -->
  <script src="static/js/jquery-1.12.4.min.js"></script>
  <script src="static/js/bootstrap.min.js"></script>
  <script src="static/js/venobox.min.js"></script>
  <script src="static/js/wow.min.js"></script>
  <script src="static/js/jquery.counterup.min.js"></script>
  <script src="static/js/waypoints.min.js"></script>
  <script src="static/js/script.js"></script>
  <script>
    const slides = document.querySelector(".slider").children;
const indicatorImages = document.querySelector(".slider-indicator").children;
let currentIndex = 0;
let intervalTime = 3000; // Time in milliseconds for autoplay (3 seconds)

// Function to change slides
function changeSlide(index) {
  // Remove 'active' class from all indicators and slides
  for (let i = 0; i < indicatorImages.length; i++) {
    indicatorImages[i].classList.remove("active");
    slides[i].classList.remove("active");
  }
  
  // Add 'active' class to the current slide and indicator
  indicatorImages[index].classList.add("active");
  slides[index].classList.add("active");
}

// Event listeners for manual slide navigation
for (let i = 0; i < indicatorImages.length; i++) {
  indicatorImages[i].addEventListener("click", function () {
    currentIndex = i; // Update current index
    changeSlide(currentIndex);
    resetAutoplay(); // Reset autoplay when manually changed
  });
}

// Autoplay function
function autoPlay() {
  currentIndex = (currentIndex + 1) % slides.length; // Move to next slide or loop back
  changeSlide(currentIndex);
}

// Start autoplay with setInterval
let autoplayInterval = setInterval(autoPlay, intervalTime);

// Function to reset autoplay (when manually navigating)
function resetAutoplay() {
  clearInterval(autoplayInterval); // Clear the interval
  autoplayInterval = setInterval(autoPlay, intervalTime); // Restart the interval
}

  </script>
</body>

</html> 